<template>
  <el-card class="user-conterner">
    <template #header>
      <div class="user-query" :style="{ height: '90px' }">
        <div class="user-query-title">
          <span class="normal-title">用户</span><span class="title-description">用户管理</span>
        </div>
        <el-form class="user-query-form" :model="userQueryFormData" :inline="true">
          <el-form-item label="名称 :">
            <el-input v-model="userQueryFormData.name" placeholder="请输入..." />
          </el-form-item>
          <el-form-item style="margin-left: auto">
            <el-button @click="reset">重置</el-button>
            <el-button @click="startQuery">查询</el-button>
            <el-button type="primary" size="small" @click="addUser">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <div class="card-body-conterner">
      <el-table
        :data="paginatedTableData"
        style="width: 100%"
        class="user-table"
        header-cell-class-name="user-table-header-cell"
      >
        <el-table-column label="名称" prop="userName"> </el-table-column>
        <el-table-column label="启用" prop="enabled">
          <template #default="scope">
            {{ scope.row.enabled ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template #default="scope">
            <el-tooltip class="box-item" effect="dark" content="编辑" placement="bottom">
              <img
                style="margin-right: 12px; cursor: pointer"
                src="@/assets/images/edit.png"
                fit="contain"
                @click="handleEdit(scope.row)"
              />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="角色设置" placement="bottom">
              <img
                style="margin-right: 12px; cursor: pointer"
                src="@/assets/images/role-set.png"
                fit="contain"
                @click="handleRoleSet(scope.row)"
              />
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="删除" placement="bottom">
              <img
                style="cursor: pointer"
                src="@/assets/images/delete.png"
                fit="contain"
                @click="handleDelete(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="totalOrignTableData > 10"
        v-model:current-page="userQueryFormData.pageNum"
        v-model:page-size="userQueryFormData.pageSize"
        class="user-pagination"
        :page-sizes="[10, 20, 50, 100]"
        :background="true"
        layout="prev, pager, next, total, sizes"
        :total="totalOrignTableData"
      />
    </div>
    <addOrUpdate ref="addOrUpdateRef" @update-users="startQuery"></addOrUpdate>
    <associationRole v-model:visible="associationRoleDialogVisible" :userInfo="selectUser"></associationRole>
  </el-card>
</template>

<script setup lang="ts" name="authButton">
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'
import addOrUpdate from './addOrUpdate.vue'
import associationRole from './associationRole.vue'
import { computed, onMounted, reactive, ref } from 'vue'
import type { ISecurity } from 'geoserver-helper/interface'
import { restHelperInstance } from '@/composables/useGeoHelper'

interface userFormDialogExpose {
  openDialog: (opentionTypeParam?: string) => void
  setOrignUser: (orignParam: ISecurity.UserInfo) => void
}
const addOrUpdateRef = ref<userFormDialogExpose | undefined>()
//角色设置弹窗显隐
const associationRoleDialogVisible = ref(false)
const userQueryFormData = reactive({
  name: '',
  pageNum: 1,
  pageSize: 10,
})
// 选中的项
const selectUser = ref<ISecurity.UserInfo>()
const orignTableData = ref<ISecurity.UserInfo[]>([])

//分页数据
const paginatedTableData = computed(() => {
  return orignTableData.value.slice(
    (userQueryFormData.pageNum - 1) * userQueryFormData.pageSize,
    userQueryFormData.pageNum * userQueryFormData.pageSize,
  )
})
// 数据总数
const totalOrignTableData = ref(0)

/**
 * @description: 重置
 * @return {*}
 */
const reset = () => {
  userQueryFormData.name = ''
  userQueryFormData.pageNum = 1
  userQueryFormData.pageSize = 10
}

/**
 * @description: 查询
 * @return {*}
 */
const startQuery = () => {
  totalOrignTableData.value = 0
  orignTableData.value = []
  restHelperInstance.getUsers().then((res) => {
    res.users.forEach((eachItem) => {
      if (!userQueryFormData.name || String(eachItem.userName).includes(userQueryFormData.name)) {
        totalOrignTableData.value += 1
        orignTableData.value.push(eachItem)
      }
    })
  })
}

const addUser = () => {
  if (addOrUpdateRef.value) {
    addOrUpdateRef.value.openDialog('新增')
  }
}

const handleEdit = (readyToUpdateData: ISecurity.UserInfo) => {
  if (addOrUpdateRef.value) {
    addOrUpdateRef.value.setOrignUser(readyToUpdateData)
    addOrUpdateRef.value.openDialog('编辑')
  }
}
/**
 * @description: 角色设置
 * @param {*} row
 * @return {*}
 */
const handleRoleSet = (row: ISecurity.UserInfo) => {
  selectUser.value = row
  associationRoleDialogVisible.value = true
}
const handleDelete = (row: ISecurity.UserInfo) => {
  ElMessageBox.confirm('确认删除该用户么?', '', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      restHelperInstance.deleteUser(row.userName).then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        startQuery()
      })
    })
    .catch(() => {})
}

onMounted(() => {
  startQuery()
})
</script>

<style scoped lang="scss">
@import './index';
</style>
